<template>
	<div class="ddan">
		<div class="qbdd">
			<div>
				<span>全部订单</span>
				<p>
					查看全部
					<i class="iconfont" style="font-size: 0.4rem;">&#xe637;</i>
				</p>
			</div>
			<div>
				<ul>
					<li v-for="item in ddanList" :key="item.id">
						<router-link to="/order">
							<img :src="item.imgURL" />
							<p>{{item.name}}</p>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name:'Ddan',
	data(){
		return{
			ddanList:[
				{ id:1 , imgURL:"ddanimg/ddanming-01.png",name:"待付款" },
				{ id:2 , imgURL:"ddanimg/ddanming-02.png",name:"已付款" },
				{ id:3 , imgURL:"ddanimg/ddanming-03.png",name:"待评价" },
				{ id:4 , imgURL:"ddanimg/ddanming-04.png",name:"退款/售后" },
			],
		}
	}
}
</script>

<style scoped>
.ddan{
	height: 3.3rem;
	width: 100%;
	background-color: #f5f5f5;
}
.qbdd{
	width: 94%;
	margin: 0.3rem auto 0;
	border-radius: 0.2rem;
	background-color: white;
}
.qbdd div{
	height: 1rem;
}
.qbdd div span{
	float: left;
	line-height: 1rem;
	margin-left: 0.2rem;
}
.qbdd div p{
	float: right;
	line-height: 1rem;
	color: #bbbbbb;
}
.qbdd div ul{
	text-align: center;
	line-height: 1rem;
}
.qbdd div ul li{
	float: left;
	width: 25%;
}
.qbdd div ul li img{
	width: 0.9rem;
	height: 0.9rem;
	display: block;
	margin: 0 auto;
}
.qbdd div ul li p{
	width: 100%;
	line-height: 0.6rem;
	color: black;
}
.qbdd div:nth-child(2){
	height: 1.5rem;
}
</style>
